<template>
  <div class="avue-top">
    <div class="top-bar__left">
      <div class="avue-breadcrumb" :class="[{ 'avue-breadcrumb--active': isCollapse }]"
        v-if="setting.collapse && !isHorizontal">
        <i class="icon-navicon" @click="setCollapse"></i>
      </div>
    </div>
    <div class="top-bar__title">
      <top-menu ref="topMenu" v-if="setting.menu"></top-menu>
      <top-search class="top-bar__item" v-if="setting.search"></top-search>
    </div>
    <div class="top-bar__right">
      <!--<el-tooltip effect="dark" content="购物车" placement="top">-->

        <!--<div class="top-bar__item1" style="margin-right: 10px;">-->
          <!--<el-badge :value="12" @click="openCar">-->
            <!--<el-icon class="car">-->
              <!--<ShoppingCart />-->
            <!--</el-icon>-->
          <!--</el-badge>-->
        <!--</div>-->

      <!--</el-tooltip>-->


      <el-tooltip effect="dark" content="站内信" placement="top">
        <div class="top-bar__item1">
          <top-notice></top-notice>
        </div>
      </el-tooltip>

      <!-- <el-icon class="car" style="transform: translateY(1px);"><ShoppingCart /></el-icon> -->
      <el-tooltip effect="dark" content="暂离时锁定系统，防止他人使用" placement="top">
        <div v-if="setting.lock" class="top-bar__item">
          <top-lock></top-lock>
        </div>
      </el-tooltip>
      <el-tooltip effect="dark" content="切换系统主题风格" placement="top">
        <div v-if="setting.theme" class="top-bar__item">
          <top-theme></top-theme>
        </div>
      </el-tooltip>
      <!--<div class="top-bar__item">-->
      <!--<top-lang></top-lang>-->
      <!--</div>-->
      <el-tooltip effect="dark" content="全屏展示系统" placement="top">
        <div class="top-bar__item" v-if="setting.fullscren">
          <top-full></top-full>
        </div>
      </el-tooltip>
      <!--<div class="top-bar__item" v-if="setting.debug">-->
      <!--<top-logs></top-logs>-->
      <!--</div>-->
      <div class="top-user">
        <img class="top-bar__img" :src="userInfo.avatar" />
        <el-dropdown>
          <span class="el-dropdown-link">
            {{ userInfo.userName }}
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
                <router-link to="/">{{ $t('navbar.dashboard') }}</router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <!-- <router-link to="/system/userinfo">{{ $t('navbar.userinfo') }}</router-link> -->
                <div @click="go">{{ $t('navbar.userinfo') }} </div>
              </el-dropdown-item>
              <el-dropdown-item @click="logout" divided>{{ $t('navbar.logOut') }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <top-setting></top-setting>
      </div>
    </div>


    <el-drawer v-model="drawer" :direction="direction" title="购物车" size="30%" :show-close="false">
      <div class="car-list">
        <div class="car-item">
          <el-image style="width: 100px; height: 100px" src="https://imgcs.s98s2.com/common/1693362816747782.png"
            :preview-src-list="['https://imgcs.s98s2.com/common/1693362816747782.png']" />
          <div class="car-item-right">
            <div class="flex">
              <div>单价：¥139.00</div>
              <div class="text-right">总价：¥139.00</div>
            </div>
            <div class="flex">
              <div class="ellipsis">文字描述：哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
              <div class="text-right">
                <el-input-number v-model="num" :min="1" :max="99999" @change="handleChange()" size="small"
                  style="transform: translateY(2px);" />
              </div>
            </div>
          </div>
        </div>

        <div class="car-item">
          <el-image style="width: 100px; height: 100px" src="https://imgcs.s98s2.com/common/1693362816747782.png"
            :preview-src-list="['https://imgcs.s98s2.com/common/1693362816747782.png']" />
          <div class="car-item-right">
            <div class="flex">
              <div>单价：¥139.00</div>
              <div class="text-right">总价：¥139.00</div>
            </div>
            <div class="flex">
              <div class="ellipsis">文字描述：哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
              <div class="text-right">
                <el-input-number v-model="num" :min="1" :max="99999" @change="handleChange()" size="small"
                  style="transform: translateY(2px);" />
              </div>
            </div>
          </div>
        </div>


        <div class="car-item">
          <el-image style="width: 100px; height: 100px" src="https://imgcs.s98s2.com/common/1693362816747782.png"
            :preview-src-list="['https://imgcs.s98s2.com/common/1693362816747782.png']" />
          <div class="car-item-right">
            <div class="flex">
              <div>单价：¥139.00</div>
              <div class="text-right">总价：¥139.00</div>
            </div>
            <div class="flex">
              <div class="ellipsis">文字描述：哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
              <div class="text-right">
                <el-input-number v-model="num" :min="1" :max="99999" @change="handleChange()" size="small"
                  style="transform: translateY(2px);" />
              </div>
            </div>
          </div>
        </div>

        <div class="car-item">
          <el-image style="width: 100px; height: 100px" src="https://imgcs.s98s2.com/common/1693362816747782.png"
            :preview-src-list="['https://imgcs.s98s2.com/common/1693362816747782.png']" />
          <div class="car-item-right">
            <div class="flex">
              <div>单价：¥139.00</div>
              <div class="text-right">总价：¥139.00</div>
            </div>
            <div class="flex">
              <div class="ellipsis">文字描述：哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
              <div class="text-right">
                <el-input-number v-model="num" :min="1" :max="99999" @change="handleChange()" size="small"
                  style="transform: translateY(2px);" />
              </div>
            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <div class="footer">
          <div>总金额：¥13229.00</div>
          <div>
            <el-button>清空购物车</el-button>
            <el-button type="danger" @click="confirm">提交购物车</el-button>
          </div>

        </div>
      </template>
    </el-drawer>
  </div>
</template>
<script>
import { mapGetters, mapState } from "vuex";
import topLock from './top-lock.vue';
import topMenu from './top-menu.vue';
import topSearch from './top-search.vue';
import topTheme from './top-theme.vue';
import topNotice from './top-notice.vue';
import topLogs from './top-logs.vue';
import topLang from './top-lang.vue';
import topFull from './top-full.vue';
import topSetting from '../setting.vue';

export default {
  components: {
    topLock,
    topMenu,
    topSearch,
    topTheme,
    topNotice,
    topLogs,
    topLang,
    topFull,
    topSetting,
  },
  name: 'top',
  data() {
    return {
      direction: 'rtl',
      drawer: false,
      num: 1
    };
  },
  filters: {},
  created() { },
  mounted() {
    // this.$on("refreshUser", () => {
    //     this.$forceUpdate()
    // })
  },
  computed: {
    ...mapGetters([
      'setting',
      'userInfo',
      'tagWel',
      'tagList',
      'isCollapse',
      'tag',
      'logsLen',
      'logsFlag',
      'isHorizontal',
    ]),
  },
  methods: {
    setCollapse() {
      this.$store.commit('SET_COLLAPSE');
    },
    logout() {
      this.$confirm(this.$t('logoutTip'), "", {
        confirmButtonText: this.$t('submitText'),
        cancelButtonText: this.$t('cancelText'),
        type: 'warning',
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          this.$router.push({ path: '/login' });
        });
      });
    },
    go() {
      this.$router.push({ path: '/system/userinfo', name: '个人信息' });
    },
    openCar() {
      this.drawer = true
    },
    handleChange() {

    },
    cancel() {
      this.drawer = false
    },
    confirm() {
      this.drawer = false
    }
  },
};
</script>

<style lang="scss" scoped>
.top-bar__item1{
  position: relative;
    display: inline-block;
    height: 50px;
    margin: 0 4px;
    font-size: 16px;
}
.el-input-number {
  width: 90px;
}

.text-right {
  text-align: right;
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  color: red;
  align-items: center;
}
:deep(.el-icon svg) {
  width: 18px ;
  height: 18px ;

  transform: translateY(2.1px);
  cursor: pointer;
}

.car {
  width: 18px;
  height: 18px;
  margin-right: 8px ;
  //  transform: translateY(1px);
  cursor: pointer;
}

:deep(.el-badge__content.is-fixed) {
  // transform: translateY(-5%) translateX(100%) ;
  // right: calc(7px + var(--el-badge-size)/ 2) ;
  right: 12px;
  top:13px 
}

.car-list {
  width: 100%;
  margin: auto;
  background: white;

  .car-item {

    padding: 20px 20px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: flex-start;
    font-size: 14px;
    margin-bottom: 20px;

    .car-item-right {
      margin-left: 20px;
      width: 70%;

      .ellipsis {
        width: 240px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }


  }
}
</style>
